<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>设置中心</el-breadcrumb-item>
          <el-breadcrumb-item>机器人管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center">
            <el-button type="primary" @click="showDialog = true"
            >添加机器人</el-button
            >

            <div class="sel-box margin-l-30">
              <span class="form-span">所属游戏：</span>
              <el-select        v-model="page.game_type" placeholder="请选择">
                <el-option
                    v-for="(item,index) in gameTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
              <div style="padding: 5px;"></div>
              <el-input style="width: 260px;" v-model="page.keyword" placeholder="请输入机器人名称"/>

              <el-button type="primary" class="margin-l-10" @click="toQuery()"
              >搜索</el-button
              >
            </div>
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column prop="robot_name" label="机器人昵称" />
          <el-table-column label="机器人图片">
            <template #default="scope">
              <img
                  style="width: 40px; height: 40px"
                  :src="scope.row.robot_imgurl"
              />
            </template>
          </el-table-column>
          <el-table-column prop="vip" label="VIP等级">
          <template #default="scope">
            VIP{{scope.row.vip}}
          </template>
          </el-table-column>
          <el-table-column prop="game_name" label="所属游戏"/>
<!--          <el-table-column prop="create_time" label="添加时间" />-->
          <el-table-column label="操作操作" width="300">
            <template #default="scope">
              <el-button type="warning" @click="edit(scope.row)"
              >编辑</el-button
              >
              <el-popconfirm
                  title="确定删除此机器人?"
                  @confirm="admin_robot_delete(scope.row.id)"
              >
                <template #reference>
                  <el-button type="danger" :icon="Delete">删除</el-button>
                </template>
              </el-popconfirm>

              <el-button type="primary" @click="openOrder(scope.row)"
              >投注订单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="padding: 10px"></div>
        <el-pagination
            small
            background
            v-model:currentPage="page.pagenum"
            v-model:page-size="page.pagesize"
            :page-sizes="[20, 50]"
            :small="small"
            :background="background"
            layout="total, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-card>
    </el-col>
  </el-row>

  <!-- 添加机器人 -->
  <el-dialog
      v-model="showDialog"
      title="添加机器人"
      center
      width="38%"
      @close="handleClose"
  >
    <el-form label-width="100px">
      <el-form-item label="机器人昵称">
        <el-input
            type="text"
            v-model="formData.robot_name"
            placeholder="列如：刘德华"
        />
      </el-form-item>
      <el-form-item label="所属游戏">
        <el-select   
            style="width: 230px"
            v-model="formData.game_type"
            placeholder="请选择规则"
        >
          <el-option
              v-for="(item,index) in gameTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"
              @change="changeGameType(index)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="机器人图片">
        <el-input
            type="text"
            v-model="formData.robot_imgurl"
            disabled
            placeholder="图片尺寸要求：150*150px"
        >
          <template #append>
            <el-button @click="ImageUpload()">选择图片</el-button>
          </template>
        </el-input>
        <div style="display: flex; flex-direction: column; position: relative">
          <div
              v-if="formData.robot_imgurl"
              style="
              width: 150px;
              height: 150px;
              border: solid 1px #e6e6e6;
              margin-top: 5px;
            "
          >
            <img style="width: 150px; height: 150px" :src="imageUrl" />
          </div>

          <div
              v-if="formData.robot_imgurl"
              style="
              width: 20px;
              height: 20px;
              position: absolute;
              top: 5px;
              right: -20px;
            "
              @click="formData.robot_imgurl = ''"
          >
            <svg
                t="1678712155966"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4668"
                width="20"
                height="20"
            >
              <path
                  d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                  fill="#d81e06"
                  p-id="4669"
              ></path>
              <path
                  d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                  fill="#d81e06"
                  p-id="4670"
              ></path>
            </svg>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="vip">
        <el-select        style="width: 150px;" v-model="formData.vip" placeholder="请选择vip等级">

          <el-option :label="item.name" :value="item.level" v-for="item in vip.list">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" @click="showDialog = false">取消保存</el-button>
      <el-button type="primary" @click="SubmitFormData">保存提交</el-button>
    </template>
  </el-dialog>

  <!-- 修改机器人 -->
  <el-dialog
      v-model="editDialog"
      title="修改机器人"
      center
      width="38%"
      @close="handleClose"
  >
    <el-form label-width="100px">
      <el-form-item label="机器人昵称">
        <el-input
            type="text"
            v-model="formData.robot_name"
            placeholder="列如：刘德华"
        />
      </el-form-item>
      <el-form-item label="所属游戏">
        <el-select   
            style="width: 230px"
            v-model="formData.game_type"
            placeholder="请选择规则"
        >
          <el-option
              v-for="(item,index) in gameTypeList"
              :key="index"
              :label="item.name"
              :value="item.id"

          />
        </el-select>
      </el-form-item>
      <el-form-item label="机器人图片">
        <el-input
            type="text"
            v-model="formData.robot_imgurl"
            disabled
            placeholder="图片尺寸要求：150*150px"
        >
          <template #append>
            <el-button @click="ImageUpload()">选择图片</el-button>
          </template>
        </el-input>
        <div style="display: flex; flex-direction: column; position: relative">
          <div
              v-if="formData.robot_imgurl"
              style="
              width: 150px;
              height: 150px;
              border: solid 1px #e6e6e6;
              margin-top: 5px;
            "
          >
            <img style="width: 150px; height: 150px" :src="imageUrl" />
          </div>

          <div
              v-if="formData.robot_imgurl"
              style="
              width: 20px;
              height: 20px;
              position: absolute;
              top: 5px;
              right: -20px;
            "
              @click="formData.robot_imgurl = ''"
          >
            <svg
                t="1678712155966"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4668"
                width="20"
                height="20"
            >
              <path
                  d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"
                  fill="#d81e06"
                  p-id="4669"
              ></path>
              <path
                  d="M557.05545 513.376159l138.367639-136.864185c12.576374-12.416396 12.672705-32.671738 0.25631-45.248112s-32.704421-12.672705-45.248112-0.25631l-138.560301 137.024163-136.447897-136.864185c-12.512727-12.512727-32.735385-12.576374-45.248112-0.063647-12.512727 12.480043-12.54369 32.735385-0.063647 45.248112l136.255235 136.671523-137.376804 135.904314c-12.576374 12.447359-12.672705 32.671738-0.25631 45.248112 6.271845 6.335493 14.496116 9.504099 22.751351 9.504099 8.12794 0 16.25588-3.103239 22.496761-9.247789l137.567746-136.064292 138.687596 139.136568c6.240882 6.271845 14.432469 9.407768 22.65674 9.407768 8.191587 0 16.352211-3.135923 22.591372-9.34412 12.512727-12.480043 12.54369-32.704421 0.063647-45.248112L557.05545 513.376159z"
                  fill="#d81e06"
                  p-id="4670"
              ></path>
            </svg>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="vip">
        <el-select        style="width: 150px;" v-model="formData.vip" placeholder="请选择vip等级">

          <el-option :label="item.name" :value="item.level" v-for="item in vip.list">{{item.name}}</el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="danger" @click="handleClose">取消保存</el-button>
      <el-button type="primary" @click="SubmitFormData">保存提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, inject, getCurrentInstance,watch  } from "vue";
import { success, error } from "@/common/tool/message.js";
import { request_post } from "@/common/axios/request.js";
import { ArrowRightBold, Delete } from "@element-plus/icons-vue";
import { useRouter } from 'vue-router';
const router = useRouter()

const { proxy } = getCurrentInstance();
const showDialog = ref(false);
const editDialog = ref(false);
const tableData = reactive({ list: [] });

const formData = reactive({
  id: "",
  robot_name: "",
  robot_imgurl: "",
  game_type:0,
  game_name:"全部",
  type:'',
  vip:0,
});
const editData = reactive({
  id: "",
  robot_name: "",
  robot_imgurl: "",
  game_type:0,
  game_name:"全部",
  type:'',
  vip:0,
});
const vip = reactive({ list: [] })

// 游戏列表
let gameTypeList = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'红包接龙'},
  {'id':2,'name':'红包二八杠'},
  {'id':3,'name':'红包扫雷'},
  {'id':4,'name':'红包牛牛'},
]);
let hongbaoList = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'红包接龙'},
  {'id':2,'name':'红包二八杠'},
  {'id':3,'name':'红包扫雷'},
  {'id':4,'name':'红包牛牛'},
]);
let ebList = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'新澳门28'},
  {'id':2,'name':'加拿大28'},
  {'id':3,'name':'澳门28'},
  {'id':4,'name':'香港28'},
  {'id':5,'name':'亚洲28'},
  {'id':6,'name':'俄罗斯28'},
  {'id':7,'name':'新加坡28'},
  {'id':8,'name':'欧洲28'},
  {'id':9,'name':'澳洲28'},
  {'id':10,'name':'墨西哥28'},
  {'id':11,'name':'台湾28'},
  {'id':12,'name':'加拿大28(自开)'},
  {'id':13,'name':'阿根廷28'},
  {'id':14,'name':'荷兰28'},

]);
let lhcList = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'澳门六合彩'},
  {'id':2,'name':'香港六合彩'},
  {'id':3,'name':'极速六合彩'},

]);
let ksList = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'韩国快3'},
  {'id':2,'name':'韩国极速快3'},
]);
let pk10List = reactive([
  {'id':0,'name':'全部'},
  {'id':1,'name':'极速赛车'},
  {'id':2,'name':'极速飞艇'},
]);
function SubmitFormData() {
  admin_robot_create();
}

onMounted(() => {
  setGameType()
});


const changeGameType = (e) => {
  console.log(111)
};
// 获取机器人列表
function admin_robot_index() {
  request_post("/admin_robot_index", page).then((res) => {
    if (res.data.code == 200) {
      tableData.list = res.data.data.data;
      page.total = res.data.data.total;
      vip.list = res.data.data.vip_list
    } else {
      return error(res.data.msg);
    }
  });
}

// 添加机器人
function admin_robot_create() {

  gameTypeList.forEach((item)=>{
    if(item.id==formData.game_type){
      formData.game_name = item.name;
    }
  })

  if (formData.robot_imgurl == "") {
    return error("机器人图片不能为空");
  }

  request_post("/admin_robot_create", formData).then((res) => {
    if (res.data.code == 200) {
      admin_robot_index();
      showDialog.value = false;
      editDialog.value = false;
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 删除机器人
function admin_robot_delete(id) {
  console.log(id);
  request_post("/admin_robot_delete", { id }).then((res) => {
    if (res.data.code == 200) {
      admin_robot_index();
      return success(res.data.msg);
    } else {
      return error(res.data.msg);
    }
  });
}

// 更新游戏
const updateGame = () => {};

// 投注订单
const openOrder = () => {};

// 分页
const page = reactive({
  type:1,//1红包，2：28，3:lhc,4:k3
  pagenum: 1,
  pagesize: 15,
  total: 0,
  keyword:null,
  game_type: null,
});

watch(() => router.currentRoute.value.query.type, (newId, oldId) => {
  if (newId && newId !== oldId) {
    setGameType()
  }
});

const setGameType = ()=>{
  formData.type = page.type = router.currentRoute.value.query.type
  page.game_type = 0
  if(page.type=='hongbao'){
    gameTypeList = hongbaoList
  }else if(page.type=='28'){
    gameTypeList = ebList
  }else if(page.type=='lhc'){
    gameTypeList = lhcList
  }else if(page.type=='pk10'){
    gameTypeList = pk10List
  }else{
    gameTypeList = ksList
  }
  admin_robot_index();
}
const toQuery = () => {
  page.pagenum = 1;
  admin_robot_index();
};

function handleSizeChange(val) {
  page.pagenum = val;
  admin_robot_index();
}
function handleCurrentChange(val) {
  page.pagenum = val;
  admin_robot_index();
}

// 修改机器人
function edit(item) {
  formData.id = item.id;
  formData.robot_name = item.robot_name;
  formData.robot_imgurl = item.robot_imgurl;
  formData.game_type = item.game_type;
  formData.vip = item.vip;
  imageUrl.value = item.robot_imgurl;
  editDialog.value = true;
}

function handleClose() {
  formData.id = "";
  formData.robot_name = "";
  formData.robot_imgurl = "";
  formData.game_type = 0;
  formData.vip = 0;
  imageUrl.value = "";
  editDialog.value = false;
}

// 图片上传
const imageUrl = ref(inject("imageUrl"));
const imageModel = inject("showImageModel");

function ImageUpload() {
  imageModel();
  formData.robot_imgurl = imageUrl;
}
</script>

<style scoped>
.sel-box {
  display: flex;
  align-items: center;
}

.form-span {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.margin-l-30 {
  margin-left: 30px;
}

.margin-l-10 {
  margin-left: 10px;
}
</style>
